import React from "react";
import { Sidebar, SidebarItem, Divider } from "react-vant";
import axios from "axios";
import "./App1.scss";
class App extends React.Component {
  state = {
    tabs: [],
    tabsIndex: 0,
    pos: [],
  };
  getTabs = async () => {
    const resp = await axios.get("/api/tabs");
    this.setState({ tabs: resp.data.data }, () => {
      // 数据发生更新， 并且页面渲染完毕
      const els = [...document.querySelectorAll(".divider")];
      const arr = els.map((v) => v.offsetTop);
      this.setState({
        pos: arr,
      });
    });
  };
  changeTabsIndex = (i) => {
    this.setState({
      tabsIndex: i,
    });

    // 1. 锚点 跳转 走id
    // 2. 获取指定高度
    const rightEl = this.right.current;
    rightEl.scrollTop = this.state.pos[i];
  };
  onScroll = () => {
    const { pos } = this.state;
    const rightEl = this.right.current;
    const scrollTop = rightEl.scrollTop;

    pos.forEach((v, i) => {
      if (scrollTop > v && scrollTop < pos[i + 1]) {
        this.setState({
          tabsIndex: i,
        });
      }
    });
  };
  constructor(props) {
    super(props);

    this.right = React.createRef();
  }
  render() {
    const { tabs } = this.state;
    return (
      <div className="qwer">
        <Sidebar sideStyle={{ height: "100vh", overflowY: "scroll" }}>
          {tabs.map((v) => {
            return (
              <SidebarItem title={v.title} key={v.id}>
                <div className="list">
                  {v.children.map((v) => {
                    return (
                      <div key={v.id} className="list-item">
                        <img src={v.image} alt="" />
                        <span>{v.title}</span>
                      </div>
                    );
                  })}
                </div>
              </SidebarItem>
            );
          })}
        </Sidebar>
      </div>
    );
  }

  render() {
    const { tabs, tabsIndex } = this.state;
    return (
      <div className="app1">
        <div className="left">
          {tabs.map((v, i) => {
            return (
              <span
                key={v.id}
                onClick={() => this.changeTabsIndex(i)}
                className={i === tabsIndex ? "active" : ""}
                // href={"#" + v.id}
              >
                {v.title}
              </span>
            );
          })}
        </div>
        <div
          className="right"
          ref={this.right}
          onScroll={() => this.onScroll()}
        >
          {tabs.map((v) => {
            return (
              <div key={v.id}>
                <Divider id={v.id} className="divider">
                  <h3>{v.title}</h3>
                </Divider>
                <div className="list">
                  {v.children.map((v) => {
                    return (
                      <div key={v.id} className="list-item">
                        <img src={v.image} alt="" />
                        <span>{v.title}</span>
                      </div>
                    );
                  })}
                </div>
              </div>
            );
          })}
        </div>
      </div>
    );
  }
  componentDidMount() {
    this.getTabs();
  }
}

export default App;
